<template>
    <div class="main">
        <div class="operate">
            <el-input class="inputCss" v-model="searchTitle" placeholder="请输入搜索的标题" clearable></el-input>
            <el-button
                icon="el-icon-search"
                type="primary"
                plain
                @click="getSearchList">&nbsp;查询</el-button>
            <el-button
                icon="el-icon-refresh"
                type="primary"
                plain
                class="right"
                @click="refresh">&nbsp;刷新</el-button>
            
        </div>
        <div class="table">
            <vxe-table
                show-overflow
                align="center"
                :data="tableDatas"
                border
                highlight-current-row
                @current-change="handleCurrentRow"
                :height="heightY"
            >
                <vxe-column type="seq" width="60" />
                <vxe-column title="标题" field="applyName"></vxe-column>
                <vxe-column field="applyOrgName" title="申请部门" width="300"/>
                <vxe-column field="addUserName" title="申请人" width="300"/>
                <vxe-column field="startDate" title="开始日期" width="180"/>
                <vxe-column field="endDate" title="截止日期" width="180"/>
                <vxe-column title="状态" width="300">
                  <template slot-scope="scope">
                    <el-button type="primary" size="medium" plain @click="rowClick(scope.row)">审批</el-button>
                  </template>
                </vxe-column>
            </vxe-table>
            <vxe-pager
                background
                align="right"
                :current-page.sync="pages.currentPage"
                :page-size.sync="pages.pageSize"
                :total="pages.totalResult"
                size="small"
                :page-sizes="[20, 50, 100, 500, 1000]"
                :layouts="[
                    'PrevJump',
                    'PrevPage',
                    'JumpNumber',
                    'NextPage',
                    'NextJump',
                    'Sizes',
                    'FullJump',
                    'Total',
                ]"
                @page-change="handlePageChange"
            >
            </vxe-pager>
        </div>
        <documentExamine v-if="documentExamineFlag" ref="documentExamineRefs"></documentExamine>
    </div>
  </template>
  
  <script>  
  import store from "@/store";
  import {searchGetList} from "@/api/datacentersg/achives/documentApi";
  import documentExamine from "./documentExamine.vue";

  export default {
    components:{documentExamine},
    data() {
        return {
            heightY: window.innerHeight - 250 + "px",
            tableDatas: [
            {
                applyName:"谢逊",
                applyOrgName:"组织部",
                addUserName:"张三",
                startDate:"2024-2-21",
                endDate:"2024-2-21",
                viewState:1,
                auditState:2,
              }
            ],
            searchTitle:"",
            documentExamineFlag:false,
            currentRow:null,
            pages:{
              currentPage: 1,
              pageSize: 20,
              totalResult: 0,
            }
        };
    },
    created() {
        this.getSearchList();
    },
    methods:{
        getSearchList(){
           const params = {
               userId: store.getters.user_id.toString(),
               token: store.getters.token.toString(),
               data:{
                  applyName:this.searchTitle,
                  pageSize:this.pages.pageSize,
                  currentPage:this.pages.currentPage
               }
           }
           searchGetList(params).then((result) => {
            if(result.result){
                 this.tableDatas = result.resultdata.data
                 this.pages.totalResult = result.resultdata.count
            }
           })
        },
        handleCurrentRow(currentRow){
          this.currentRow = currentRow.row;
        },
        handlePageChange({ currentPage, pageSize }){
            this.pages.currentPage = currentPage;
            this.pages.pageSize = pageSize;
            this.getSearchList();
        },
        // 刷新
        refresh(){
            this.getSearchList();
        },
        // 每行的按钮审批        
        rowClick(row){
           this.documentExamineFlag = true;
           this.$nextTick(()=>{
             this.$refs.documentExamineRefs.init(row);
           })
        },
    }
  };
  </script>
  <style scoped>
  .main {
    width: 100%;
    height: calc(100% - 50px);
    background-color: #ffffff;
  }
  .operate {
    height: 70px;
    padding: 10px;
    /* display: flex; */
    align-items: center;
    justify-content: flex-end;
  }
  .table {
    height: 85vh;
    overflow-y: scroll;
  }
  .inputCss{
    float:left;
    margin-right:10px;
    width:300px;
  }
  .selectCss{
    float:left;
    margin-right:10px;
  }
  .right{
    float: right;
  }
  </style>
  